<template>
	<view class="order page">
		
		
		<view class="status">
			<view class="title">
				<text class="txt">{{orderStatusOptions[vo.saleOrder.orderStatus]}} {{paidOptions[vo.saleOrder.paid]}}</text>
			</view>
			<view class="more" v-if="vo.saleOrder.orderStatus==2||vo.saleOrder.orderStatus==3">
				<view class="more-title">感谢您对童仔美食的信任，期待再次光临</view>
				<view class="tool">
					<button class="chat btn" open-type="contact">
						<text class="iconfont iconkefu"></text>
						<text class="txt">联系客服</text>
					</button>
					<view class="chat" @click="callSend">
						<text class="iconfont iconlianximaijia"></text>
						<text class="txt">联系骑士</text>
					</view>
				</view>
			</view>
			<view class="order-detail">
				<view class="title">
					<text class="name">{{vo.shop.name}}</text>
					<!-- <text class="rebuy">再来一单</text> -->
				</view>
				<view class="items">
					<view class="item" v-for="(item,index) in vo.saleOrder.items" :key="index">
						<image class="img" :src="IMG_H+item.img" mode=""></image>
						<view class="info">
							<text class="name">{{item.name}}</text>
							<text class="quantity">x {{item.quantity}}</text>
						</view>
						<view class="prices">
							<text class="now">￥{{item.price}}</text>
							<text class="old">￥{{item.oldPrice}}</text>
						</view>
					</view>
					<view class="other-price">
											<text class="name">包装费</text>
											<text class="val">￥{{vo.saleOrder.packPrice}}</text>
										</view>
										<view class="other-price">
											<text class="name">配送费</text>
											<text class="val">￥{{vo.saleOrder.sendPrice}}</text>
										</view>
				</view>
				<view class="bottom">
					<view class="left" @click="callShop">
						<text class="iconfont iconlianximaijia"></text>
						<text class="txt">联系商家</text>
					</view>
					<view class="right">
					<!-- 	<view class="item cut">
							<text class="name"></text>
							<text class="val">￥10</text>
						</view> -->
						<view class="item price">
							<text class="name">小计</text>
							<text class="val">￥{{vo.saleOrder.pay}}</text>
						</view>
					</view>
				</view>
			</view>
			<view class="send block" v-if="vo.saleOrder.type==0">
				<text class="title">配送信息</text>
				<view class="more">
					<view class="item">
						<text class="name">送达时间</text>
						<view class="val">尽快送达</view>
					</view>
					<view class="item">
						<text class="name">收货地址</text>
						<view class="val">{{vo.saleOrder.near}}{{vo.saleOrder.detail}}{{vo.saleOrder.house}}</view>
					</view>
					<view class="item">
						<text class="name">配送骑士</text>
						<view class="val">
							<text class="iconfont"></text>
							<text  @click="call" class="txt" v-if="vo.saleOrder.sendName">电话骑士{{vo.saleOrder.sendName}}</text>
						</view>
					</view>
				</view>
			</view>
			
			<view class="o block">
				<text class="title">订单信息</text>
				<view class="more">
					<view class="item">
						<text class="name">订单类型</text>
						<view class="val">{{typeOptions[vo.saleOrder.type]}}</view>
					</view>
					<view class="item">
						<text class="name">订单号</text>
						<view class="val">{{vo.saleOrder.orderNo}}</view>
					</view>
					<view class="item">
						<text class="name">订单价格</text>
						<view class="val">{{vo.saleOrder.price}}</view>
					</view>
					<view class="item">
						<text class="name">配送费用</text>
						<view class="val">{{vo.saleOrder.sendPrice}}</view>
					</view>
					<view class="item">
						<text class="name">是否支付</text>
						<view class="val">{{paidOptions[vo.saleOrder.paid]}}</view>
					</view>
					<view class="item" v-if="vo.saleOrder.paid==1">
						<text class="name">实际支付</text>
						<view class="val">{{vo.saleOrder.pay}}</view>
					</view>
					<view class="item">
						<text class="name">订单状态</text>
						<view class="val">{{orderStatusOptions[vo.saleOrder.orderStatus]}}</view>
					</view>
					<view class="item">
						<text class="name">支付方式</text>
						<view class="val">{{payWayOptions[vo.saleOrder.payWay]}}</view>
					</view>
				</view>
			</view>
		</view>
		
		
	<order-bar style="position: fixed;left: 0;right: 0;bottom: 0;" @pay="pay" @cancel="cancel"  :order="vo.saleOrder"></order-bar>
	</view>
</template>

<script>
		import orderBar  from '@/components/mall-order-detail-bar/mall-order-detail-bar.vue'
		import {info,options,repay} from '@/api/sale_order.js'
		import {showCorrect} from '@/modal/index.js'
		import {cancel} from '@/api/sale_order.js'
		import CONFIG from '@/config/index.js'
		export default {
			components:{
				orderBar
			},
			computed:{
				IMG_H(){
					return CONFIG.IMG_HEAD
				}
			},
			onShow(){
			  let id = this.$Route.query.id
			  if(id){
				  info(id).then(res => {
					  this.vo = res.data
				  })
			  }
			  this.getOptions()
			},
			methods:{
				callSend(){
					wx.makePhoneCall({
					  phoneNumber: this.vo.saleOrder.sendPhone //仅为示例，并非真实的电话号码
					})
				},
				callShop(){
					wx.makePhoneCall({
					  phoneNumber: this.vo.shop.phone //仅为示例，并非真实的电话号码
					})
				},
				getOptions(){
					options().then(res => {
												this.paidOptions =res.data.paidOptions
												this.orderStatusOptions =res.data.orderStatusOptions
												this.payWayOptions =res.data.payWayOptions
												this.typeOptions = res.data.typeOptions
					                  })
				},
				pay(){
					repay(this.vo.saleOrder.id).then(res => {
						let ob = JSON.parse(res.data)
						uni.requestPayment({
							success:()=>{
								showCorrect("支付成功").then(res => {
									info(id).then(res => {
										this.vo = res.data
									})
								})
							},
							...ob
						})
					})
				},
				cancel(){
					cancel(this.vo.saleOrder.id).then(res => {
						showCorrect("取消成功").then(res => {
							console.log(res)
						})
						this.vo.saleOrder = res.data
					})
				}
			},
			data() {
				return {
					paidOptions:[],
					orderStatusOptions:[],
					payWayOptions:[],
					typeOptions:[],
				    vo:{}
				};
			}
		}
	</script>

<style lang="stylus">
	.order
		background url(../../../static/hbg.png) no-repeat
		background-size 100% auto
		background-color #EFEFEF
		padding-bottom 100upx
		.status
			padding 0 20upx
			.title
				font-size 32upx
				color white
				margin-bottom 21upx
			.more
				background-color white
				border-radius 20upx
				.more-title
					padding-left 20upx
					font-size 30upx
					color #000000
					height 84upx
					line-height 84upx
					border-bottom 1px solid #EFEFEF
				.tool
					display flex
					height 115upx
					.chat
						flex 1
						display flex
						align-items center
						justify-content center
						flex-direction column
						.iconfont
							width 32upx
							margin-bottom 10upx
							color #A24545
						.txt
							color #000000
							font-size 24upx
							line-height 24upx
						&.btn
							line-height normal
							border none
							outline none
							margin 0 
							padding 0
							border-radius 0
							background-color white
							&::after
								border-radius 0
								border none
			.order-detail
				border-radius 20upx
				background-color white
				padding-top 37upx
				margin-top 20upx
				.title
					display flex
					justify-content space-between
					padding 0 10px
					.name
						font-size 24upx
						color #000000
					.rebuy
						color #335C67
						font-size 22upx
				.items
					padding 0 26upx
					background-color white
					border-radius 20upx
					.item
						margin-top 36upx
						display flex
						.img
							width:108upx;
							height:108upx;
							margin-right 28upx
						.info
							flex 1
							display flex
							flex-direction column
							.name
								color #000000
								font-size 22upx
							.quantity
								color #A1A1A1
								font-size 20upx
								margin-top 20upx
						.prices
							display flex
							flex-direction column
							.now
								color #000000
								font-size 22upx
								margin-bottom 18upx
							.old
								color #A1A1A1
								font-size 18upx
								text-decoration line-through
					.other-price
						margin-top 20upx
						display flex
						justify-content space-between
						padding 0 18upx
						font-size 22upx
						color #000000
						margin-bottom 20upx
				.bottom
					border-top 1px solid #EFEFEF
					display flex
					justify-content space-between
					height 79upx
					display flex
					align-items center
					padding 0 36upx
					.left
						flex  1
						.iconlianximaijia
							font-size 23upx
							margin-right 10upx
							color #335C67
						.txt
							font-size 24upx
							color #335C67
					.right
						display flex
						align-items center
						.item
							.name
								color #000000
								font-size 24upx
							.val
								color #A24545
								font-size 24upx
						.cut
							margin-right 35upx
		.block
			margin-top 20upx
			background-color white
			border-radius 20upx
			padding 27upx 17upx
			.title
				color #000000
				font-size 22upx
			.more
				.item
					margin-top 28upx
					display flex
					.name
						flex 1
						color #A1A1A1
						font-size 22upx
					.val
						max-width 70%
						color #000000
						font-size 22upx
					
</style>
